<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js基础</title>
    <style>
        /*内嵌*/
        .app{
            color: red;
        }
    </style>
</head>
<body>
<!--
        javascript  包含几部分?
        1.ECMASCRIPT    js核心   js基础  js高级  es5
        2.BOM  浏览器对象模型  history  location
        3.DOM  文档对象模型    节点操作
-->

<!--style="color: blue"  行内-->
<div id="app">

</div>

<table border="1px" cellspacing="0" width="100%"  id="tb">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>

<!--  jsp 声明式编程-->
<!--    <c:foreach  items = "${students}" var="student">-->
<!--        <tr>-->
<!--            <td>${student.id}</td>-->
<!--            <td>${student.name}</td>-->
<!--            <td>${student.age}</td>-->
<!--        </tr>-->
<!--    </c:foreach>-->

</table>

<script type="text/javascript">
    // 获取节点对象   方式 ?
    // document.getElementById()
    // document.getElementsByTagName()
    // document.getElementsByClassName()
    // document.querySelector()
    // document.querySelectorAll()
    // var     es6 - >  let  const

    // js中常见的数据类型 有几种   string  number  boolean  undefined  object  null
    let number = {}
    console.log(typeof number)

    let app = document.getElementById("app")
    console.log(app)

    app =  document.querySelector("#app")
    console.log(app)

    // 添加内容到节点对象   innerText 不能识别html标签     innerHTML
    // app.innerText = '<h1>java2320</h1>'
    app.innerHTML = '<h1>java2320</h1>'

    // 获取节点中的内容
    console.log(app.innerHTML)  // <h1>java2320</h1>
    console.log(app.innerText)  // java2320

    // 改变字体颜色  js操作节点对象的属性
    // app.style.color = 'red'
     app.className = 'app'
     app.style.fontSize='30px'

    // <p>hello java2320</p>  通过节点对象 添加元素到父节点  创建节点对象
     let  p = document.createElement('p')
    console.log(p)
    p.innerText = "hello java2320"
    console.log(p)
    // 通过appendChild  将节点添加到父节点
    app.appendChild(p)

    //如果渲染的是表格
    let students = [
        {
            id:1,
            name:'tom',
            age:20
        },
        {
            id:2,
            name:'jack',
            age:21
        },
        {
            id:3,
            name:'xiaoming',
            age:22
        }
    ]


    // 命令式编程
    //  获取表格的父节点对象
     let tb =  document.querySelector("#tb")
    //  遍历数组  动态创建节点对象
    students.forEach(student=>{
        // 创建tr节点对象
        let tr = document.createElement("tr");
        for (let studentKey in student) {
            let td = document.createElement("td")
            td.innerText = student[studentKey]
            //  添加td 到 tr
            tr.appendChild(td)
        }
        tb.appendChild(tr);
    })


</script>

</body>
</html>
